import React, { useState, useEffect } from 'react';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
import { Content } from 'react-fule-ui';
// 路由模块
import CssAvatar from './Pages/CssAvatar';
import CssTableFlex from './Pages/CssTableFlex';
import CssFacing from './Pages/CssFacing';
import CssTiangle from './Pages/CssTiangle';
import CssBackPosition1 from './Pages/CssBackPosition1';
import CssBackPosition2 from './Pages/CssBackPosition2';
import CssBackPosition3 from './Pages/CssBackPosition3';
import CssPenetrate from './Pages/CssPenetrate';
import CssPoorVision from './Pages/CssPoorVision';
import CssCard from './Pages/CssCard';
export default function Bookkeeping() {
  // 是否需要开启100%布局
  const [fazhi, setFazhi] = useState(false);
  const url = window.location.hash.split('#')[1];

  useEffect(() => {
    if (
      url === '/FuleCss/Facing' ||
      url === '/FuleCss/BackPosition1' ||
      url === '/FuleCss/BackPosition2' ||
      url === '/FuleCss/BackPosition3' ||
      url === '/FuleCss/PoorVision'
    ) {
      setFazhi(true);
    } else {
      setFazhi(false);
    }
  }, [url]);
  return (
    <Router>
      <Content>
        <Content.Header>有趣的布局效果</Content.Header>
        <Content.Body full={fazhi} subMenu>
          <Switch>
            <Route exact path="/FuleCss" component={CssAvatar} />
            <Route path="/FuleCss/Avatar" component={CssAvatar} />
            <Route path="/FuleCss/TableFlex" component={CssTableFlex} />
            <Route path="/FuleCss/Facing" component={CssFacing} />
            <Route path="/FuleCss/BackPosition1" component={CssBackPosition1} />
            <Route path="/FuleCss/BackPosition2" component={CssBackPosition2} />
            <Route path="/FuleCss/BackPosition3" component={CssBackPosition3} />
            <Route path="/FuleCss/PoorVision" component={CssPoorVision} />
            <Route path="/FuleCss/CssPenetrate" component={CssPenetrate} />
            <Route path="/FuleCss/Tiangle" component={CssTiangle} />
            <Route path="/FuleCss/Card" component={CssCard} />
          </Switch>
        </Content.Body>
      </Content>
    </Router>
  );
}
